<template>
    <div class="songe">
        <div :class="['item',{'bg':selecte === index}]" 
        v-for="(item,index) in songsData"
         :key="index"
          @mouseenter="mouse(index)"
          @mouseleave="leave"
          >
            <div class="td">
                <a href="javascript:;" class="ply " @click="send_id(item.id , $event)"></a>
            </div>
            <div class="td w0">
                <div class="text overflow">
                    <a href="">{{item.name}}</a>
                </div>
            </div>
            <div :class="['td' , 'hidden' , {'show':selecte === index}]">
               <span class="icn icn-bg"></span>
               <span class="icn icn-share"></span>
            </div>
            <div class="td w1">
                <a href="" >{{item.artists[0].name}}</a>
            </div>
            <div class="td w2 overflow">
               <a href="" class="s-fc3">《{{item.album.name}}》</a>
            </div>
            <div class="td date">03:43</div>
        </div>
    </div>
</template>

<script>
 import {searchResult} from "../../../network/search"
 import {TransformTime} from '../../../components/tool/tool'
export default {
     props:['keywords'],
    data() {
        return {
            songsData:[],
            selecte:-1,
            transfrom_Time:null
        }
    },
    methods:{
        send_id(id , e){          //发送 音乐id
           this.$store.dispatch("music_ct",{music_id :id, pageY:e.pageY})
        },
       Result(keywords){
           console.log("我被加载了")
            searchResult(keywords,18,0,1).then(res => {
              for(const item of res.data.result.songs){
                  this.songsData.push(item)
              }
          })
       },
       mouse(index){
          this.selecte = index
       },
       leave(){
           this.selecte = -1
       }
    },
    created(){
          this.Result(this.keywords)
    },
   watch:{
       keywords(value){
           this.songsData = []
           this.Result(value)
       }
   }
}
</script>

<style scoped>
.songe{width: 100%;}
.item{padding: 10px 10px 8px 18px;border: 1px solid #fff;height: 24px;}
.td{margin-right: 5px; float: left;}
.ply{display: inline-block; width: 17px; height: 17px; margin-right: 15px;cursor: pointer;background: url("../../../assets/imgs/table.png") no-repeat; background-position: 0 -103px;}
.ply:hover{background-position: 0 -128px;}
.w0{width: 370px;}
.text{width: 92px;height: 20px;color: #333;}
a{font-size: 12px;}

.u-icn{ display: inline-block;overflow: hidden; vertical-align: middle; margin: 0 7px 0 0;}
.u-icn-81 { width: 13px;height: 13px; background: url("../../../assets/imgs/icon.png") no-repeat;background-position: 0px -700px;}
.u-icn:hover{background-position: -22px -700px;}

.icn{ width: 18px; height: 14px; cursor: pointer; margin: 0 7px 0 0; display: inline-block; vertical-align: middle;}
.icn-bg{background:url("../../../assets/imgs/table.png") no-repeat; background-position: 0px -174px;}
.icn-bg:hover{background-position: -20px -174px;}

.icn-share{background:url("../../../assets/imgs/table.png") no-repeat; background-position: 0px -195px;}
.icn-share:hover{background-position: -20px -195px;}

.w1{width: 15%;margin-right: 12px;}

.w2{width: 18%;margin-right: 12px;}
.s-fc3{color: #666;}
.date{font-size: 12px;color: #333;line-height: 22px;}

.overflow{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.hidden{opacity: 0;}
.show{opacity: 1;}

.bg{background-color: #f5f5f5;}
</style>